<template>
	<view style="background: #F1F5FF;height: 100vh;">
		
		<myHeadTab>活动详情</myHeadTab>
		
		<view style="height: 32rpx;"></view>
		<uni-row style="height: 46rpx;">
			<uni-col :span="1" :offset="1">
				<image style="width: 36rpx;height: 36rpx;position: relative;top: 6rpx;" src="../../../static/名称.png"></image>
			</uni-col>
			
			<uni-col :span="20">
				<text class="f3" style="position: relative;left: 16rpx;">{{activity?.title}}</text>
			</uni-col>
			
			<uni-col :span="1" >
				<image style="height: 32rpx;width: 32rpx;position: relative;top: 6rpx;" src="../../../static/分享.png"></image>
			</uni-col>
			
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">意向前往中学</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 360rpx;display: flex;">
						<view style="display: flex;">
							<view style="height: 40rpx;width: 40rpx;">
								<image src="" style="position: relative;  height: 40rpx;width: 40rpx;border-radius: 100%;border: 2rpx solid black;"></image>
							</view>
							<view style="height: 100%;width: 19rpx;"></view>
						</view>
						
						<view style="height: 40rpx;">
							<text class="f5">{{activity?.school}}</text>
						</view>
						
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">行政区域地址</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 300rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{splitLocation(activity?.area)}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 244rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动时间</text>
					</view>
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 384rpx;height: 168rpx;">
						
						<view>
							<text class="f6">计划开始日期：{{activity?.beiginDate}}</text>
						</view>
						
						<view>
							<text class="f6">计划结束日期：{{activity?.endDate}}</text>
						</view>
						
						<view>
							<text class="f6">合计时长：{{calculateDuration(activity?.beiginDate,activity?.endDate)}}天</text>
						</view>
		
		
						
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动简介</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 400rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{activity?.introduction}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		
		<uni-row style="background: #F1F5FF;">
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 1120rpx;padding-top: 24rpx;padding-left: 24rpx;padding-right: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">报名申请</text>
					</view>
					
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 384rpx;height: 168rpx;">
						
						<view>
							<text class="f6">姓名：{{user.name}}</text>
						</view>
						
						<view>
							<text class="f6">学号/工号：{{user.stuNumber}}</text>
						</view>
						
						<view>
							<text class="f6">学院：{{user.academy}}</text>
						</view>
					</view>
					
					<view style="height: 20rpx;width: 100%;"></view>
					
					<template v-for="(item,index) in inforColumn" :key="index">
						<view style="height: 72rpx;width: 100%;display: flex;" v-if="index <=4">
						
							<view v-if="index < 4" style="display: flex;">
								<view style="height: 34rpx;width: 118rpx;">
									<text class="f7">{{item.title}} <font style="font-size: 24rpx;color: #FF3636;">*</font></text>
								</view>
							
								<view style="width: 16rpx;height: 100%;"></view>
						
								<view style="width: 504rpx;height: 72rpx;">
									<input class="f9 i2" @input="handleInput($event,index)" style="height: 100%;padding-left: 24rpx;" :placeholder="item.pl" placeholder-style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 24rpx;color: #A9ACB4;letter-spacing: 0;"/>

								</view>
							</view>
							
							<view v-if="index == 4" style="display: flex;">
								<view style="height: 34rpx;width: 286rpx;">
									<text class="f7">{{item.title}} <font style="font-size: 24rpx;color: #FF3636;">*</font></text>
								</view>
							
								<view style="width: 50rpx;height: 100%;" v-if="index == 4"></view>
								
								<view v-if="index==4" style="display: flex;">
									<view style="display: flex;width: 56rpx;height: 100%;" @click="form.isAcceptCharge = true">
										<image style="width: 20rpx;height: 20rpx;position: relative; top: 26rpx;" src="../../../static/否.png" v-if="!form.isAcceptCharge"></image>
										<image style="width: 20rpx;height: 20rpx;position: relative; top: 26rpx;" src="../../../static/是.png" v-if="form.isAcceptCharge"></image>
										<view style="width: 12rpx;height: 100%;"></view>
										<text style="width: 24rpx;height: 34rpx;line-height: 72rpx;" class="f8">是</text>
									</view>	
										
									<view style="width: 56rpx;height: 100%;"></view>	
								
									<view style="display: flex;width: 56rpx;height: 100%;" @click="form.isAcceptCharge = false" >
										<image style="width: 20rpx;height: 20rpx;position: relative; top: 26rpx;" src="../../../static/否.png" v-if="form.isAcceptCharge"></image>
										<image style="width: 20rpx;height: 20rpx;position: relative; top: 26rpx;" src="../../../static/是.png" v-if="!form.isAcceptCharge"></image>
										<view style="width: 12rpx;height: 100%;"></view>
										<text style="width: 24rpx;height: 34rpx;line-height: 72rpx;" class="f8">否</text>
									</view>
								</view>
								
								
							</view>
							

						</view>
						
						<view style="height: 194rpx;width: 100%;" v-if="index > 4">
							<view style="height: 34rpx;width: 310rpx;">
								<text class="f7" style="line-height: 0rpx;">{{item.title}} <font style="font-size: 24rpx;color: #FF3636;">*</font></text>
							</view>
							<view style="width: 100%;height: 12rpx;"></view>
					
									<textarea   :placeholder="item.pl" placeholder-style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 24rpx;color: #A9ACB4;letter-spacing: 0;" style="width: 614rpx;padding-top: 12rpx;padding-left: 24rpx;" class="textarea f9"/>
						</view>
							
						<view style="height: 16rpx;width: 100%;"></view>
					</template>
					
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 32rpx;background: #F1F5FF;"></view>
		
		<uni-row style="background: #F1F5FF;">
			<uni-col :span="22" :offset="1">
				<button @click="submit" class="btn"><text class="f2" style="position: relative;top: -8rpx;">立即报名</text></button>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;background: #F1F5FF;"></view>
		
			
		<uni-row style="height: 34rpx;background: #F1F5FF;">
			<uni-col :span="14" :offset="5" style="display: flex;justify-content: center;">
				<text class="f1">报名审核通过，可见更多详细活动信息</text>
			</uni-col>
		</uni-row>
		<view style="height: 28rpx;background: #F1F5FF;"></view>
		
	</view>
</template>

<script setup>
	import { onMounted,getCurrentInstance,ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import myHeadTab from '../../../component/myHeadTab/index.vue'
		
		const activity = ref();
		const activityId = ref();
		onLoad((options) => {
			console.log('接受值:',options);
			activityId.value = options;
		})
		
		
		onMounted(()=>{
			uni.request({
				url:'/data/activities.json',
				data: {activityId: activityId.value},
				success(res){
					activity.value = res.data.at(2);
				}
			})
		})
		
		const user = ref({
			name: '姓名1',
			stuNumber: '10001',
			academy: 'A学院'
		})
		
		
		function calculateDuration(startDate,endDate){
		  if (startDate && endDate) {  
		    const start = new Date(startDate);  
		    const end = new Date(endDate);  
		    const diffTime = Math.abs(end - start);  
		    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 转换为天数  
		  } else {  
		    return null;  
		    alert('请输入有效的日期');  
		  }  
		}
		
		const splitLocation = (location) => {
		   if (location) {  
		     // 使用正则表达式和 ng-replace 分割  
		     return location.replace(/(.{2,3}省|.{2,3}市|.{2,3}区)/g, '$1/').slice(0, -1);  
		   } else {  
		     return '';  
		     alert('请输入有效的省市区');  
		   }  
		 }; 
		 
		 const inforColumn = [
		 	{
		 		title: '联系方式',
		 		pl: '请输入联系方式',
				type: 'input'
		 	},
		 	{
		 		title: 'QQ号码',
		 		pl: '请输入QQ号码',
				type: 'input'
		 	},
		 	{
		 		title: '微信号码',
		 		pl:'请输入微信号码',
				type: 'input'
		 	},
		 	{
		 		title: '意向中学',
		 		pl:'请输入意向中学',
				type: 'input'
		 	},
			{
				title: '是否愿意担任团队负责人',
				type: 'radio'
			},
			{
				title: '大学以来担任学生干部经历',
				pl:'请输入大学以来担任学生干部经历',
				type: 'textarea'
			},
			{
				title: '大学以来获奖励荣誉经历',
				pl:'请输入大学以来获奖励荣誉经历',
				type: 'textarea'
			},
			
		 ]
		 
		 const form = ref({
			 phone: '',
			 QQ: '',
			 WX: '',
			 school: '',
			 isAcceptCharge: true,
			 workExperience:'',
			 reward: '',
		 })
		 
</script>

<style scoped>
	
.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}
	
	.f2{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 40rpx;
	}
	
	.btn{
		height: 80rpx;
		background: #276EFF;
		border-radius: 16rpx;
		
	}
	
.f3{
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32rpx;
color: #000000;
letter-spacing: 0;
line-height: 46rpx;
}
.f4{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;	
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}
.card{
	background: #FFFFFF;
	border-radius: 16rpx;
}

.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #000000;
	letter-spacing: 0;
}

.i1{
	background: #F4F4F4;
	border-radius: 8rpx;
}
.i2{
	background: #F1F5FF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
}

.f7{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 72rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}

.f8{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
}
.textarea{
	height: 152rpx;
	background: #F1F5FF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
}
</style>
